<template>
  <div>
    <el-form ref="searchForm" :model="searchForm" label-position="right" class="f-bg"
             label-width="120px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="客户名称" class="f-bg" prop="memberUserId_EQ">
              <el-select class="f-ww60" v-model="searchForm.memberUserId_EQ"
                         remote
                         :remote-method="searchMemberUsers"
                         filterable
                         placeholder="请选择客户">
                <el-option v-for="mu in memberUsers" :label="mu.realName"
                           :key="mu.userId"
                           :value="mu.userId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="结算方式" class="f-bg" prop="receivableType_EQ">
              <el-select class="f-ww60" v-model="searchForm.receivableType_EQ"
                         placeholder="请选择结算方式">
                <el-option v-for="receivableType in $store.getters.PAY_WAY"
                           :label="receivableType.cnDictValname"
                           :key="receivableType.dictVal"
                           :value="receivableType.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发生日期" class="f-bg" prop="happenDate">
            <el-date-picker class="f-ww60"
                            v-model="searchForm.happenDate"
                            type="daterange"
                            placeholder="选择日期范围">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="应收单号" class="f-bg" prop="receivableNumber_LIKE">
              <el-input class="f-ww60" v-model="searchForm.receivableNumber_LIKE"
                        placeholder="请输入应收单号"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="订单编号" class="f-bg" prop="orderNumber_LIKE">
              <el-input class="f-ww60" v-model="searchForm.orderNumber_LIKE"
                        placeholder="请输入订单编号"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <!--<el-col :span="8">-->
        <!--<div class="grid-content bg-purple">-->
        <!--<el-form-item label="是否已付款" class="f-bg" prop="receivableStatus_EQ">-->
        <!--<el-input class="f-ww60" v-model="searchForm.receivableStatus_EQ"-->
        <!--placeholder="请输入订单编号"></el-input>-->
        <!--</el-form-item>-->
        <!--</div>-->
        <!--</el-col>-->
      </el-row>
    </el-form>
    <div class="f-mt10 f-mb10">
      <el-button type="primary" class="f-fr f-ml10" @click="resetSearchForm('searchForm')">重置</el-button>
      <el-button type="primary" class="f-fr f-ml10" @click="searchOrderReceivables">查询</el-button>
    </div>

    <div class="f-mt10">
      <el-table :data="orderReceivableTableData" ref="orderReceivableTableData" height="500" border
                @selection-change="scOrderReceivables">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="receivableNumber" label="应收单号" width="250">
        </el-table-column>
        <el-table-column prop="happenDate" label="发生日期" width="250">
        </el-table-column>
        <el-table-column prop="receivableTypeName" label="结算方式" width="200">
        </el-table-column>
        <el-table-column prop="memberUserName" label="客户名称" width="260">
        </el-table-column>
        <el-table-column prop="orderNumber" label="订单编号" width="240">
        </el-table-column>
        <el-table-column prop="receivableMoney" label="应收总额" width="100">
        </el-table-column>
        <el-table-column prop="receivedMoney" label="已收总额" width="300">
        </el-table-column>
      </el-table>
      <el-pagination class="f-mt10 f-mb10"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     layout="total,sizes,prev, pager, next, jumper"
                     :total="total" style="float: right">
      </el-pagination>
    </div>
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <el-button type="primary" class="f-fr f-ml10" @click="closeClick">取消</el-button>
        <el-button type="primary" class="f-fr" @click="importOrderReceivables">导入明细</el-button>
      </div>
    </el-col>
  </div>
</template>
<script>
import { getNotOutInvoiceOrderReceivables } from '../../api/order/orderReceivable.js';
import { getMemberUsers } from '../../api/customer/maintain.js';
import { isEmpty, resetObjNull, toFilters } from '../../lib/util.js';

export default {
  data () {
    return {
      orderReceivables: [],
      token: this.$store.state.token,
      memberUsers: [],
      searchForm: {
        memberUserId_EQ: null,
        receivableType_EQ: null,
        happenDate: null,
        receivableNumber_LIKE: null,
        receivableStatus_EQ: null,
        orderNumber_LIKE: null
      },
      receivableMoney: '',
      orderReceivableTableData: '',
      invoicePeriodEndDate: '',
      total: 0,
      currentPage: 1,
      pageSize: 15
    };
  },
  props: {
    title: []
  },
  watch: {
    title (val) {
      this.invoicePeriodEndDate = val;
      this.setFilters();
    }
  },
  methods: {
    closeClick () {
      this.$emit('closeMsg', 'close');
    },
    importOrderReceivables () {
      let or = Object.assign([], this.orderReceivables);
      this.orderReceivables.forEach(row => {
        this.$refs.orderReceivableTableData.clearSelection();
      });
      this.$emit('orderReceivables', or);
    },
    searchMemberUsers (val) {
      if (!isEmpty(val)) {
        getMemberUsers({
          token: this.token,
          filters: 'status=111002001',
          sorts: '',
          size: '15',
          page: '1'
        }).then((res) => {
          this.memberUsers = res.data.detailModelList;
        });
      }
    },
    setFilters () {
      let fs = this.title;
      this.searchForm.memberUserId_EQ = fs[0].memberUserId;
      this.searchForm.receivableType_EQ = fs[0].receivableType;
      this.searchOrderReceivables();
    },
    /**
       * 多条件检索订单信息
       */
    searchOrderReceivables () {
      let signOffFilters = 'signOffDate>=' + this.title[1].s.Format('yyyy-MM-dd') + ';signOffDate<=' + this.title[1].e.Format('yyyy-MM-dd');
      let rbs = this.title[2].receivableNumbers;
      let f = isEmpty(rbs) ? toFilters(this.searchForm) : toFilters(this.searchForm) + ';receivableNumber<>' + rbs;
      this.getOrderReceivables(f, signOffFilters);
    },
    /**
       * 表格多选
       */
    scOrderReceivables (val) {
      for (let v in val) {
        val[v].adjustAmount = 0;
        val[v].invoiceAdjustLaterTotalAmount = val[v].receivableMoney;
      }
      this.orderReceivables = val;
    },
    getOrderReceivables (orFilters, signOffFilters) {
      if (isEmpty(orFilters)) {
        orFilters = 'invoiceNumber=null;receivableType=102002003,102002004,102002005;';
      } else {
        orFilters = orFilters + ';invoiceNumber=null;receivableType=102002003,102002004,102002005;';
      }
      getNotOutInvoiceOrderReceivables({
        filters: orFilters,
        sign_off_filters: signOffFilters,
        sorts: '-createDate',
        size: this.pageSize,
        page: this.currentPage
      }).then((res) => {
        if (res.data.successFlg) {
          this.orderReceivableTableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        }
      });
    },

    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.setFilters();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.setFilters();
    },
    getMemberUsers () {
      getMemberUsers({
        page: 1,
        size: 15,
        filters: 'status=111002001',
        sorts: ''
      }).then((res) => {
        this.memberUsers = res.data.detailModelList;
      });
    },
    resetSearchForm () {
      resetObjNull(this.searchForm);
    }
  },
  mounted () {
    this.setFilters();
    this.getMemberUsers();
    this.$store.commit('initDict');
  }
};
</script>
<style lang="less" scoped>
  .f-ww60 {
    width: 60%;
  }

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple {
    background: #ffffff;
  }

  .bg-purple-light {
    background: #ffffff;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-row {
    margin-bottom: 0;
    height: 40px;
  }

  .el-col-8 {
    height: 40px;
  }

  .active {
    display: none;
  }
</style>
